<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能客服系统</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#60A5FA',
                        accent: '#93C5FD',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .chat-shadow {
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            }
            .chat-bubble-user {
                border-radius: 18px 18px 4px 18px;
            }
            .chat-bubble-bot {
                border-radius: 18px 18px 18px 4px;
            }
            .icon-pulse {
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.05);
                }
                100% {
                    transform: scale(1);
                }
            }
            .slide-in {
                animation: slideIn 0.3s ease-out forwards;
            }
            .slide-out {
                animation: slideOut 0.3s ease-in forwards;
            }
            @keyframes slideIn {
                from {
                    transform: translateX(100%);
                }
                to {
                    transform: translateX(0);
                }
            }
            @keyframes slideOut {
                from {
                    transform: translateX(0);
                }
                to {
                    transform: translateX(100%);
                }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
    <!-- 网页内容 -->
    <div class="container mx-auto px-4 py-8">
        <header class="mb-12 text-center">
            <h1 class="text-4xl font-bold text-dark mb-4">智能客服系统演示</h1>
            <p class="text-xl text-gray-600">点击右下角图标打开客服对话框</p>
        </header>
        
        <main class="max-w-4xl mx-auto">
            <section class="bg-white rounded-lg shadow-md p-6 mb-8">
                <h2 class="text-2xl font-bold mb-4">欢迎使用我们的网站</h2>
                <p class="mb-4">这是一个演示页面，展示了智能客服系统的集成效果。您可以点击右下角的客服图标，与我们的智能客服进行交流。</p>
                <p>我们的智能客服可以为您提供产品咨询、技术支持、订单查询等多种服务。</p>
            </section>
            
            <section class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="text-primary text-3xl mb-4"><i class="fa fa-comments"></i></div>
                    <h3 class="text-xl font-bold mb-2">即时通讯</h3>
                    <p class="text-gray-600">快速响应您的咨询，无需等待人工客服。</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="text-primary text-3xl mb-4"><i class="fa fa-question-circle"></i></div>
                    <h3 class="text-xl font-bold mb-2">常见问题</h3>
                    <p class="text-gray-600">智能识别并解答常见问题，提高服务效率。</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="text-primary text-3xl mb-4"><i class="fa fa-clock-o"></i></div>
                    <h3 class="text-xl font-bold mb-2">24/7服务</h3>
                    <p class="text-gray-600">全天候为您提供服务，随时解决您的问题。</p>
                </div>
            </section>
        </main>
    </div>

    <!-- 智能客服图标 -->
    <div id="chat-icon" class="fixed right-6 bottom-6 w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center cursor-pointer z-50 hover:bg-secondary transition-all duration-300 icon-pulse">
        <i class="fa fa-comments text-white text-2xl"></i>
    </div>

    <!-- 智能客服对话框 -->
    <div id="chat-container" class="fixed right-0 bottom-0 w-full md:w-96 h-[70vh] bg-white border-t border-l border-gray-200 chat-shadow z-50 transform translate-x-full">
        <!-- 聊天头部 -->
        <div class="bg-primary text-white p-4 flex justify-between items-center relative">
            <div class="flex items-center">
                <i class="fa fa-headphones mr-3 text-xl"></i>
                <h3 class="text-lg font-semibold">智能客服</h3>
            </div>
            <div class="flex items-center space-x-3">
                <!-- 知识库切换按钮 -->
                <button id="knowledge-toggle-btn" class="hover:text-gray-200 relative" title="切换知识库功能">
                    <i id="knowledge-status-icon" class="fa fa-book text-green-300"></i>
                </button>
                
                <!-- 模型选择按钮 -->
                <div class="relative">
                    <button id="model-select-btn" class="hover:text-gray-200 px-2 py-1 bg-primary-700 rounded">
                        模拟回复
                    </button>
                    <div id="model-dropdown" class="hidden absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-50">
                        <button onclick="setModel('mock')" class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700">
                            <i class="fa fa-cog mr-2"></i>模拟回复
                        </button>
                        <button onclick="setModel('openai')" class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700">
                            <i class="fa fa-cloud mr-2"></i>OpenAI API
                        </button>
                        <button onclick="setModel('ollama')" class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700">
                            <i class="fa fa-server mr-2"></i>本地Ollama
                        </button>
                    </div>
                </div>
                
                <button id="minimize-btn" class="hover:text-gray-200"><i class="fa fa-window-minimize"></i></button>
                <button id="close-btn" class="hover:text-gray-200"><i class="fa fa-times"></i></button>
            </div>
        </div>
        
        <!-- 聊天内容区域 -->
        <div id="chat-messages" class="p-4 h-[calc(100%-140px)] overflow-y-auto bg-gray-50">
            <!-- 欢迎消息 -->
            <div class="flex items-start mb-4">
                <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-2 flex-shrink-0">
                    <i class="fa fa-robot"></i>
                </div>
                <div class="bg-white p-3 rounded-lg max-w-[80%] chat-bubble-bot shadow-sm">
                    <p>您好！我是智能客服助手。请问有什么可以帮助您的吗？</p>
                </div>
            </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="p-4 border-t border-gray-200">
            <div class="flex mb-2">
                <button class="text-gray-500 hover:text-primary mr-2"><i class="fa fa-smile-o"></i></button>
                <button class="text-gray-500 hover:text-primary mr-2"><i class="fa fa-paperclip"></i></button>
                <button class="text-gray-500 hover:text-primary"><i class="fa fa-microphone"></i></button>
            </div>
            <div class="flex items-center">
                <input type="text" id="user-input" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的问题...">
                <button id="send-btn" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-secondary transition-colors">
                    <i class="fa fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>